<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input v-model="listQuery.tradeNo" class="input-width" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="收货人：">
            <el-input v-model="listQuery.userID" class="input-width" placeholder="收货人ID"></el-input>
          </el-form-item>
          <el-form-item label="收货时间：">
            <el-date-picker
              v-model="listQuery.time"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="订单状态：">
            <el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table
        ref="orderTable"
        :data="list"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column prop="orderID" label="订单ID" align="center"></el-table-column>
        <el-table-column prop="tradeNo" label="订单号" align="center"></el-table-column>
        <el-table-column prop="addTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="userID" label="用户id" align="center"></el-table-column>
        <el-table-column prop="amount" label="支付金额" align="center"></el-table-column>
        <el-table-column prop="payTypeText" label="订单来源" align="center"></el-table-column>
        <el-table-column prop="StatusText" label="订单状态" align="center"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleViewOrder(scope.$index, scope.row)">查看订单</el-button>
            <el-button
              size="mini"
              type="success"
              v-if="scope.row.status==1"
              @click="delivery(scope.$index, scope.row)"
            >订单发货</el-button>
            <el-button
              size="mini"
              v-if="scope.row.status>1&&scope.row.status<4"
              @click="expressInquiry(scope.$index, scope.row)"
            >订单跟踪</el-button>
            <el-button
              size="mini"
              v-if="scope.row.status==4"
              @click="refund(scope.$index, scope.row)"
            >退货退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="margin-top-15" style="text-align: center">
      <Page
        :total="tableShow.listCount"
        :current="tableShow.currentPage"
        :page-size="tableShow.pageSize"
        @on-change="changePage"
        @on-page-size-change="changeSize"
        show-elevator
        show-sizer
        show-total
      ></Page>
    </div>
    <!-- 退款 -->
    <el-dialog
      title="退货退款处理"
      :append-to-body="true"
      top="200px"
      :visible.sync="refundVisible"
      width="30%"
    >
      <el-form :model="refundList" ref="receiverInfoForm" label-width="90px">
        <el-form-item label="退款金额：">
          <el-input v-model="refundList.money" placeholder="不填写则退还全部金额" style="width: 200px"></el-input>元
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refundVisible = false">返 回</el-button>
        <el-button type="primary" @click="RefundSubmit(6)">拒 绝</el-button>
        <el-button @click="RefundSubmit(5)">同 意</el-button>
      </span>
    </el-dialog>
    <xdelivery :deliveryVisible="deliveryVisible" :orderID="deliveryData" @hidden="hidden"></xdelivery>
    <xlogistics :logisticsVisible="logisticsVisible" :tradeNo="logisticsTradeNo" @hidden="hidden"></xlogistics>
  </div>
</template>
<script>
import axios from "axios";
import xdelivery from "./common/delivery_goods";
import xlogistics from "./common/LogisticsInformation";

export default {
  components: {
    xdelivery,
    xlogistics
  },
  data() {
    return {
      /**
       * 搜索
       */
      listQuery: {},
      statusOptions: [
        {
          label: "待付款",
          value: -1
        },
        {
          label: "待发货",
          value: 1
        },
        {
          label: "待收货",
          value: 2
        },
        {
          label: "已完成",
          value: 3
        },
        {
          label: "申请退款",
          value: 4
        },
        {
          label: "已退款",
          value: 5
        },
        {
          label: "已拒绝",
          value: 6
        }
      ],
      orderTypeOptions: [
        {
          label: "正常订单",
          value: 0
        },
        {
          label: "秒杀订单",
          value: 1
        }
      ],
      sourceTypeOptions: [
        {
          label: "PC订单",
          value: 0
        },
        {
          label: "APP订单",
          value: 1
        }
      ],
      /**
       * 表格
       */
      list: [],
      listLoading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      //发货
      deliveryVisible: false,
      deliveryData: {},
      //查快递
      logisticsVisible: false,
      logisticsTradeNo: {},
      //退款
      refundVisible: false,
      refundList: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 搜索
     */
    handleSearchList() {
      this.tableShow = {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      };
      this.getList();
    },
    handleResetSearch() {
      this.listQuery = {};
      this.tableShow = {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      };
      this.getList();
    },
    /**
     * 表格
     */
    handleSelectionChange() {},
    changePage(page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    handleViewOrder(index, row) {
      this.$router.push({
        name: "own_list_details"
      });
      sessionStorage.setItem("own_list_details", row.orderID);
    },
    /**
     * 发货
     */
    delivery(index, row) {
      this.deliveryVisible = true;
      this.deliveryData = row.orderID;
    },
    hidden() {
      this.deliveryVisible = false;
      this.deliveryData = "";
      this.logisticsVisible = false;
      this.logisticsTradeNo = {};
      this.getList();
    },
    /**
     * 查询快递
     */
    expressInquiry(index, row) {
      this.logisticsVisible = true;
      this.logisticsTradeNo.orderID = row.orderID;
      this.logisticsTradeNo.tradeNo = row.tradeNo;
    },
    /**
     * 退款
     */
    refund(index, row) {
      this.refundVisible = true;
      this.refundList.orderID = row.orderID;
    },
    RefundSubmit(val) {
      this.refundList.status = val;
      this.$confirm("退款拒绝或确定后无法撤销, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.post("MallOrder/refund", this.refundList).then(response => {
            if (response.data.code === 1) {
              this.$message({
                message: response.data.msg,
                type: "success",
                offset: 100
              });
              this.refundVisible = false;
              this.refundList = {};
            } else {
              this.$message({
                message: response.data.msg,
                type: "warning",
                offset: 100
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getList() {
      let vm = this;
      vm.listLoading = true;
      let obj = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        status: vm.listQuery.status,
        userID: vm.listQuery.userID,
        tradeNo: vm.listQuery.tradeNo,
        startTime: vm.listQuery.time ? vm.listQuery.time[0] : "",
        overTime: vm.listQuery.time ? vm.listQuery.time[1] : ""
      };
      for (let i in obj) {
        obj[i] ? obj[i] : delete obj[i];
      }
      axios.post("MallOrder/index", obj).then(function(response) {
        let res = response.data;
        if (res.code === 1) {
          vm.list = res.data.list;
          vm.tableShow.listCount = res.data.count;
        } else {
          if (res.code === -14) {
            vm.$store.commit("logout", vm);
            vm.$router.push({
              name: "login"
            });
          } else {
            vm.$message({
              message: res.msg,
              offset: 100,
              type: "error"
            });
          }
        }
        vm.listLoading = false;
      });
    }
  }
};
</script>
<style scoped>
.input-width {
  width: 203px;
}
.operate-container {
  margin-top: 20px;
}
</style>


